<template>
	<view class="pre-order">
		<view class="header-box" style="justify-content: space-between;align-items: center;">
			<view style="display: flex;justify-content: space-between;align-items: center;">
				<view>手机号码：</view>
				<view class="phone-box">
					<uni-easyinput class="pop-input" type="number" :maxlength="11" primaryColor="#ffd589" trim="all"
						v-model="phoneNumber" placeholder="请输入手机号码"></uni-easyinput>
				</view>
			</view>
			<view class="search-btn" @click="searchEvent">查询</view>
		</view>
		<view class="header-box">
			<view>订单日期：</view>
			<uni-datetime-picker v-model="range" type="daterange" @change="confirmEvent" />
		</view>
		<view class="time-box">
			<text>订单数：<text class="num-text">{{orderNum || '- -'}}</text></text>
			<text>订单金额：<text class="num-text">￥{{orderAmount || '- -'}}</text></text>
		</view>
		<scroll-view scroll-y class="scroll-box" @scrolltolower="getDataEvent">
			<view class="main">
				<view class="card-box" v-for="(item,index) in listData" :key="index">
					<view class="flex-sb mt-20">
						<image class="order-img" src="@/static/main-icon/order.png" mode=""></image>
						<view class="card-title">
							<view>订单编号：{{item.orderNumber}}</view>
							<view v-if="item.orderDetail.actualEndTime" class="card-subTitle">
								{{item.orderDetail.actualStartTime}} ~ {{item.orderDetail.actualEndTime.substring(11)}}
							</view>
						</view>
						<view v-if="item.refundStatus !== null">
							<view class="state-tag" v-if="item.refundStatus === '3'">退款中</view>
							<view class="state-tag" v-if="item.refundStatus === '4'">退款成功</view>
							<view class="state-tag" v-if="item.refundStatus === '5'">退款失败</view>
						</view>
						<view v-else>
							<view class="state-tag" v-if="item.orderStatus === 1">待支付</view>
							<view class="state-tag" v-if="item.orderStatus === 2">已支付</view>
							<view class="state-tag" v-if="item.orderStatus === 3">已完成</view>
							<view class="state-tag" v-if="item.orderStatus === 4">已取消</view>
							<view class="state-tag" v-if="item.orderStatus === 20">使用中</view>
						</view>
					</view>
					<view class="card-box-detail">
						<image class="product-img" :src="item.orderDetail.productImage" mode="aspectFill"></image>
						<view class="product-detail">
							<view class="flex-sb">
								<view class="card-text product-name">{{item.orderDetail.productName}}</view>
								<view class="card-text">x1</view>
							</view>
							<view class="card-text flex-sb">
								<text>房间类型：{{ dealProductType(item.orderDetail.productType)}}</text>
								<text>
									预定模式：
									<text v-if="item.orderDetail.bookingType == 1">套餐</text>
									<text v-if="item.orderDetail.bookingType == 2">小时</text>
									<text v-if="item.orderDetail.bookingType == 3">续费</text>
								</text>
							</view>
							<view class="card-text flex-sb">
								<text>时长：{{item.orderDetail.hour}}小时</text>
								<text>
									支付方式：
									<text v-if="item.payType == 0">余额</text>
									<text v-if="item.payType == 1">微信</text>
									<text v-if="item.payType == 2">支付宝</text>
									<text v-if="item.payType == 3">时间卡</text>
									<text v-if="item.payType == 4">美团抖音兑换券</text>
									<text v-if="item.payType == 41">美团兑换</text>
									<text v-if="item.payType == 42">抖音兑换</text>
									<text v-if="item.payType == 5">待预定</text>
								</text>
							</view>
							<view class="card-text">下单时间：{{item.createTime}}</view>
							<view class="flex-sb">
								<view class="card-text">预定用户：{{item.userMobile}}</view>
								<view class="card-text" v-if="item.payType == 1">合计：{{item.totalAmount}}</view>
								<view class="card-text" v-else>合计：0</view>
							</view>
						</view>
					</view>
					<view class="btn-box">
						<view class="common-btn" @click="deleteOrder(item,index)" v-if="item.orderStatus === 1">取消订单
						</view>
						<view class="common-btn" @click="refundEvent(item,index,'cancel')"
							v-if="item.orderStatus === 2">取消订单</view>
						<view class="common-btn" @click="finishOrder(item)" v-if="item.orderStatus === 20">提前结束</view>
						<view class="common-btn" @click="refundEvent(item,index,'refund')"
							v-if="item.orderStatus === 3 && item.refundEnable === true">退款</view>
						<view class="common-btn" @click="toDelayTime(item,index)"
							v-if="item.orderStatus === 2 || item.orderStatus === 20">订单延时</view>
						<view class="common-btn" @click="toChangeRoom(item,index)"
							v-if="item.orderStatus === 2 || item.orderStatus === 20">更换包间</view>
					</view>
				</view>
				<view class="noMore">暂无更多</view>
			</view>
		</scroll-view>

		<addGroup ref="addGroupDom">
			<view class="pop-title">该订单是否确认退款？</view>
			<view class="input-box">
				<view>退款金额</view>
				<view style="display: flex;align-items: center;">
					<input class="uni-input" type="number" v-model.trim="refundNum" maxlength="10"
						placeholder="请输入退款金额" />
					<text style="margin-left: 20rpx;">元</text>
				</view>
			</view>
			<view class="footer-box">
				<view @click="cancelRefund" class="cancel-btn">取消</view>
				<view @click="reFundReq" class="submit-btn">确认</view>
			</view>
		</addGroup>
	</view>
</template>

<script>
	import addGroup from '@/components/add-group.vue'
	export default {
		components: {
			addGroup
		},
		data() {
			return {
				productionModel:[],
				range: [],
				listData: [],
				shopId: '',
				startDate: '',
				endDate: '',
				pageSize: 10,
				pageNum: 1,
				total: 0,
				orderNum: 0,
				orderAmount: 0,
				inComeNum: 0,
				refundNum: '0',
				refundMax: 12,
				refundIndex: null,
				handleState: '',
				phoneNumber: ''
			};
		},
		methods: {
			// 延时
			toDelayTime(item, index) {
				uni.navigateTo({
					url: `/pages/delay-time/delay-time?orderId=${item.orderId}&time=${item.orderDetail.actualEndTime}&isOrder=true`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						reload: (option) => {
							this.getOrderDetail(item, index)
						}
					}
				})
			},
			// 更换包间
			toChangeRoom(item, index) {
				uni.navigateTo({
					url: `/pages/change-room/change-room?orderId=${item.orderId}&shopId=${item.shopId}&isOrder=true`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						reload: (option) => {
							this.getOrderDetail(item, index)
						}
					}
				})
			},
			// 查询某个订单详情
			getOrderDetail(item, index) {
				this.$request({
					method: 'get',
					url: `/applet/store/order/${item.orderId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						this.$set(this.listData, index, res.data)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 结束订单
			finishOrder(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认结束订单？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/order/beforeEnd/${item.orderId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									item.orderStatus = 3
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 删除订单
			deleteOrder(item, index) {
				uni.showModal({
					title: '订单未支付',
					content: '是否确认取消该订单？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/order/remove/${item.orderId}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									this.listData.splice(index, 1)
									uni.showToast({
										title: '订单已取消',
										duration: 2000,
										icon: 'none'
									})
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 订单退款处理
			refundEvent(item, index, type) {
				this.handleState = type
				this.refundNum = item.payAmount
				this.refundIndex = index
				this.$refs.addGroupDom.openPop()
			},
			reFundReq() {
				const data = {
					orderNumber: this.listData[this.refundIndex].orderNumber,
					refundAmount: this.refundNum
				}
				this.$request({
					method: 'post',
					url: `/applet/store/order/refund`,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						if (this.handleState === 'refund') {
							this.listData[this.refundIndex].refundStatus = 3
							this.listData[this.refundIndex].refundEnable = false
						} else if (this.handleState === 'cancel') {
							this.listData[this.refundIndex].orderStatus = 4
						}
						this.$refs.addGroupDom.closePop()
					} else {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 关闭退款弹窗
			cancelRefund() {
				this.$refs.addGroupDom.closePop()
			},
			// 取消订单
			cancelOrder(item) {
				uni.showModal({
					title: '提示',
					content: '是否确认取消订单？',
					cancelText: '取消',
					cancelColor: '#666',
					confirmText: '确认',
					confirmColor: '##ff9600',
					success: res => {
						if (res.confirm) {
							this.$request({
								method: 'post',
								url: `/applet/store/order/refund/${item.orderNumber}`,
								loading: true,
								isEncrypt: false
							}).then(res => {
								if (res.code === 200) {
									item.orderStatus = 4
								} else {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										icon: 'none'
									})
								}
							}).catch(err => {
								console.log('请求异常：', err)
							})
						}
					}
				})
			},
			// 手机号查询
			searchEvent(){
				this.pageNum = 1
				this.listData = []
				this.getOrderList()
			},
			// 选择日期
			confirmEvent(dateArr) {
				this.startDate = dateArr[0]
				this.endDate = dateArr[1]
				this.pageNum = 1
				this.listData = []
				this.getOrderList()
			},
			getDataEvent() {
				if (this.listData.length < this.total) {
					this.pageNum++
					this.getOrderList()
				}
			},
			// 获取产品类型
			getProductionModel() {
				this.$request({
					method: 'get',
					url: `/applet/store/product/modelList`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.productionModel = res.data || []
					this.getOrderList()
				}).catch(err => {
					console.log('查询异常：', err)
				})
			},
			// 处理产品类型
			dealProductType(productType) {
				let type = ''
				this.productionModel.forEach((item, index) => {
					if (item.modelType === productType) {
						type = item.modelName
					}
				})
				return type
			},
			// 获取订单列表
			getOrderList() {
				const data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					shopId: this.shopId,
					startDate: this.startDate,
					endDate: this.endDate,
					userMobile:this.phoneNumber
				}
				this.$request({
					method: 'post',
					url: '/applet/store/order/list',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.rows?.length > 0) {
						this.listData = [...this.listData, ...res.rows]
					}
					this.total = res.total;
					this.orderNum = res.total;
					this.getOrderListStat();
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取订单列表统计
			getOrderListStat() {
				const data = {
					shopId: this.shopId,
					startDate: this.startDate,
					endDate: this.endDate,
				}
				this.$request({
					method: 'post',
					url: '/applet/store/order/listStat',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.orderAmount = res.data;
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option) {
			this.shopId = option.shopId;
			this.getProductionModel()
		}
	}
</script>

<style lang="scss" scoped>
	.pre-order {
		.phone-box{
			display: flex;
			::v-deep .phone-input {
				height: 60rpx;
				flex: 1;
			}
		}
		
		.search-btn{
			background: #ff9600;
			color: #FFF;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
		}
		
		.pop-title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.input-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			::v-deep .uni-input {
				height: 60rpx;
				width: 300rpx;
			}
			
			::v-deep .uni-input-wrapper {
				border: 1px solid #000;
				box-sizing: border-box;
				border-radius: 8rpx;
				padding-left: 20rpx;
			}
			
		}

		.footer-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 60rpx;

			.cancel-btn {
				flex: 1;
				margin-right: 20rpx;
				background: #CCC;
				border-radius: 8rpx;
				padding: 20rpx 0;
				text-align: center;
			}

			.submit-btn {
				flex: 1;
				margin-right: 20rpx;
				background: #ff9600;
				color: #FFF;
				border-radius: 8rpx;
				padding: 20rpx 0;
				text-align: center;
			}
		}

		.header-box {
			background-color: #FFF;
			display: flex;
			padding: 10rpx 20rpx;
			align-items: center;
			font-size: 28rpx;
		}

		.card-subTitle {
			font-size: 24rpx;
			color: #666;
			text-align: center;
		}

		.time-box {
			font-weight: 600;
			background: #FFF;
			padding: 20rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.num-text {
				color: #ff9600;
			}
		}

		.scroll-box {
			height: calc(100vh - 248rpx);
		}

		.main {
			padding: 20rpx;
			background: #FFF;
		}

		.card-box {
			background: #FFF;
			border: 1px solid #EEE;
			border-radius: 20rpx;
			padding: 20rpx;
			box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;

			.flex-sb {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
			}

			.mt-20 {
				margin-bottom: 20rpx;
			}

			.order-img {
				flex: 0 0 40px;
				height: 40px;
				flex-shrink: 0;
			}

			.state-tag {
				padding: 6rpx 10rpx;
				font-size: 28rpx;
				font-weight: 600;
			}

			.card-box-detail {
				background: #FFF;
				border-top: 1px solid #CCC;
				padding: 0px 12px 0px 0px;
				display: flex;

				// align-items: center;
				.product-name {
					color: #333;
					font-size: 28rpx;
					margin-top: 20rpx;
					font-weight: 600;
				}

				.product-img {
					flex: 0 0 115px;
					height: 82px;
					flex-shrink: 0;
					margin-right: 8px;
					margin-top: 15px;
					border-radius: 5px;
				}

				.product-detail {
					width: 100%;
				}
			}
		}

		.card-title {
			// font-weight: bold;
			font-size: 28rpx;
		}

		.card-text {
			color: #333;
			font-size: 25rpx;
		}

		.noMore {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;
			margin-top: 10rpx;

			.common-btn {
				border-radius: 10rpx;
				padding: 6rpx 20rpx;
				font-size: 26rpx;
				background: #ff9600;
				color: #FFF;
				margin-left: 20rpx;
			}
		}
	}
</style>